<template>
	<view class="container-bottom-btns">
		<view class="form" v-if="from == 'add'">
			<view class="form-column-item">
				<view class="label">规格名称</view>
				<view class="content">
					<input type="text" placeholder="请输入规格名称" v-model="currName"/>
				</view>
			</view>
			<view class="add-sku-btn flex-xy-center" @tap="addSku">
				<u-icon name="plus" color="#FE5A13" size="30" :bold="true"></u-icon>
				<text>增加商品规格</text>
			</view>
		</view>
		
		<view class="form" v-if="from == 'editPrice'">
			<view class="form-column-item">
				<view class="label">当前价格</view>
				<view class="content">
					<input type="digit" v-model="oldShowPrice" disabled style="color:red" placeholder="请输入金额" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">修改价格</view>
				<view class="content">
					<input type="digit" v-model="showPrice" placeholder="请输入修改价格" />
				</view>
			</view>
		</view>
		
		<view class="form" v-for="(item, index) in skuList" :key="index">
			<view class="form-column-item">
				<view class="label sku-name flex-x-bet-y-center">
					<text>规格名称</text>
					<u-icon v-if="from != 'editPrice'" name="minus-circle-fill" color="red" size="35" @tap="delSku(index)"></u-icon>
				</view>
				<view class="content">
					<input type="text" v-model="item.skuName" placeholder="请输入规格名称" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label sku-title">价格</view>
				<view class="content">
					<input type="digit" v-model="item.skuPrice" placeholder="请输入价格" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label sku-title">库存</view>
				<view class="content">
					<input type="digit" v-model="item.skuStock" placeholder="请输入库存" />
				</view>
			</view>
		</view>
		
		<view class="bottom-btn-wrapper">
			<SubmitBtn text="保存" :customStyle="{width: '690rpx'}" @tap="submit"></SubmitBtn>
		</view>
		
	</view>

	
</template>

<script>
import { isVNode } from "vue"
import { toast } from '../../utils/uni-api'
import { changePrice, getProductDetail } from '@/api/product.js'
import validate from "../../utils/validate"
	export default {
		data() {
			return {
				skuList: [],
				from: '',
				currName: '',
				id: '',
				oldShowPrice: '',
				showPrice: '',
				isSku: 1,
				productType: 1,
				putType: 1
				
			}
		},
		onLoad(option) {
			this.id = option.id || ''
			this.from = option.from || ''
			if(this.from === 'editPrice'){
				uni.setNavigationBarTitle({
					title:'改价'
				})
				if(this.id){
					this.getProductDetail()
				}
				
			}else if(this.from === 'add'){
				let pages = getCurrentPages()
				const prePage = pages[pages.length - 2]
				this.skuList = prePage.$vm.form.hgProductSkus
			}
		},
		methods: {
			addSku() {
				if(!this.currName){
					return toast('请输入商品名称')
				}
				this.skuList.unshift({
					skuName: this.currName,
					skuPrice: '',
					skuStock: ''
				})
				this.currName = ''
			},
			delSku(index) {
				this.skuList.splice(index, 1)
			},
			getProductDetail(){
				getProductDetail({id: this.id}).then(res => {
					this.isSku = res.result.is_sku
					this.productType = res.result.product_type
					this.putType = res.result.put_type
					this.skuList = res.result.hgProductSkuList.map(item => ({skuName: item.skuName, skuPrice: item.skuPrice, skuStock: item.skuStock})) || []
					this.oldShowPrice = '￥' + res.result.show_price
				})
			},
			submit(){
				if(!this.skuList.every(item => item.skuName)){
					return toast('规格名称不能为空')
				}
				if(!this.skuList.every(item => item.skuPrice && Number(item.skuPrice) > 0)){
					return toast('价格不能为空或0')
				}
				if(!this.skuList.every(item => item.skuStock && Number(item.skuStock) > 0)){
					return toast('库存不能为空或0')
				}
				if(this.from === 'add'){
					let pages = getCurrentPages()
					const prePage = pages[pages.length - 2]
					prePage.$vm.form.hgProductSkus = this.skuList
					uni.navigateBack()
				}
				else{
					if(!validate.isNotEmpty(this.showPrice, '修改价格')) return
					if(!validate.isNotZero(this.showPrice, '修改价格')) return
					changePrice({
						id: this.id,
						showPrice: this.showPrice,
						hgProductSkus: this.skuList,
						isSku: this.isSku,
						productType: this.productType,
						putType: this.putType
					}).then(res => {
						uni.setStorageSync('refresh', 1);
						toast(res.message, true)
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					})
				}
			}
		},

	}
</script>

<style lang="scss">
	.add-sku-btn {
		width: 577rpx;
		height: 69rpx;
		background: #FFF5F0;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 1rpx solid $theme-color;
		font-size: 29rpx;
		color: $theme-color;
		margin: 30rpx auto;
		font-weight: normal;
	}

	.form-column-item {
		position: relative;
	}

	.sku-name {
		display: flex;
		align-items: center;
	}

	.sku-name::before {
		content: '';
		position: absolute;
		left: -30rpx;
		width: 6rpx;
		height: 29rpx;
		background: $theme-color;
		border-radius: 3rpx;

	}
</style>